<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue';
import echarts from './echarts';
import { watch } from 'vue';
const props = withDefaults(
  defineProps<{
    option: any;
  }>(),
  {
    option: {},
  },
);

const chartRef = ref();
let chart;
onMounted(() => {
  chart = echarts.init(chartRef.value); // 重要
  chart.setOption(props.option);
});

onUnmounted(() => {
  //释放chart的内存
  chart.dispose();
  chart = null;
});
watch(props, (newProps) => {
  chart.setOption(newProps.option);
});
</script>

<template>
  <div ref="chartRef" class="app-e-chart"></div>
</template>

<style lang="scss">
.app-e-chart {
  width: 690px;
  height: 800px;
}
</style>
./echarts
